<template>
	<view class="container">
		<!-- 状态栏 -->
		<view :class="statusBarViewClass"></view>
		<!-- 导航栏 -->
		<view class="customer-nav-view nav-sticky">
			<view class="customer-nav-left">
				<uni-icons type="back" color='#000000' size="24" @click="goBackPage"></uni-icons>
			</view>
			<view class="customer-nav-title">
				搜索
			</view>
			<view class="customer-nav-right" @click="goFavoriteMovPage">
				<uni-icons type="star" color='#FF4F80' size="24"></uni-icons>
			</view>
		</view>
		<!-- 输入框 -->
		<view class="search-input-view" id="stkRef">
			<view class="search-input-container">
				<input class="search-input-value" focus v-model="queryParam.searchKey" placeholder="请输入关键词" />
				<uni-icons class="search-input-bt" type="search" color='#cccccc' size="22"
					@click="seachData"></uni-icons>
			</view>

		</view>
		<!-- 搜索结果 -->
		<view class="video-list-view">
			<view class="video-list-content" v-if="video_list.length > 0">
				<view class="video-list-item" v-for="item,index in video_list" :key="index"
					@click="goMovDetailPage(item)">
					<!-- 或者 aspectFill -->
					<image class="video-list-item-img" mode="aspectFit"
						:src="item.image.toLowerCase().startsWith('http')?item.image:(api.host+item.image)">
					</image>
					<text class="video-list-item-name"> {{item.name}} </text>
					<text class="video-list-item-other">
						<uni-dateformat :date="item.modifyTime" format="yyyy-MM-dd"></uni-dateformat> </text>
				</view>
			</view>
			<view class="video-list-content-empty" v-else>
				暂无数据
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		nextTick
	} from 'vue'
	import {
		onReachBottom,
		onPageScroll,
	} from '@dcloudio/uni-app'
	import api from '@/config/api'
	import request from '@/utils/request'
	import {
		showToast,
		getUserId,
		getUserInfo,
		getUserToken
	} from '@/utils/utils'

	const maxTop = ref(0)
	const statusBarViewClass = ref("status-bar-view-1")

	const video_list = ref([])
	// 0 允许加载 1 没有数据了，停止加载 2 进行中
	const isOver = ref(0)
	const queryParam = ref({
		token: getUserToken(),
		pageNum: 1,
		pageSize: 15,
		sortType: 1,
		actressId: 0,
		typeId: 0,
		categoryId: 0,
		country: '地区',
		tagId: 0,
		searchKey: '',
		releaseTime: '0',
	})

	onMounted(() => {
		// 渲染完立即记录stkRef的距离
		nextTick(() => {
			const query = uni.createSelectorQuery().in(this); // 创建查询
			query.select('#stkRef').boundingClientRect((data) => {
				if (data) {
					maxTop.value = data.top
				}
			}).exec();
		})
	})

	onPageScroll((e) => {
		// 监听stkRef距离，控制状态栏样式
		if (e.scrollTop + 5 > maxTop.value) {
			if (statusBarViewClass.value == "status-bar-view-1") {
				statusBarViewClass.value = "status-bar-view-2"
			}
		} else {
			if (statusBarViewClass.value == "status-bar-view-2") {
				statusBarViewClass.value = "status-bar-view-1"
			}
		}
	})

	// 上拉加载下一页
	onReachBottom(() => {
		nextPage()
	})

	// 获取影视列表数据
	const getDataList = () => {
		isOver.value = 2
		request.get(api.host + api.videoListUrl, queryParam.value).then(result => {
			let new_mov_list = result.data
			if (queryParam.value.pageNum === 1) {
				video_list.value = []
				if (new_mov_list.length == 0) {
					isOver.value = 1
					showToast('没有数据')
				} else if (new_mov_list.length > 0 && new_mov_list.length < queryParam.value.pageSize) {
					isOver.value = 1
					showToast('已全部加载完毕')
				} else {
					isOver.value = 0
				}
				// 先清空列表，等渲染完了，再赋值列表
				nextTick(() => {
					video_list.value = new_mov_list
				})
			} else {
				video_list.value.push(...new_mov_list)
				if (new_mov_list.length < queryParam.value.pageSize) {
					isOver.value = 1
					showToast('已全部加载完毕')
				} else {
					isOver.value = 0
				}
			}
		})
	}

	// 搜索
	const seachData = () => {
		if (!queryParam.value.searchKey || queryParam.value.searchKey.trim() == '') {
			showToast('请输入关键词')
			return
		}
		queryParam.value.pageNum = 1
		isOver.value = 0
		getDataList()
	}

	// 下一页
	const nextPage = () => {
		if (isOver.value === 1) {
			showToast('没有更多了')
			return
		} else if (isOver.value === 2) {
			showToast('正在加载中')
			return
		}
		queryParam.value.pageNum = queryParam.value.pageNum + 1
		getDataList()
	}

	// 前往详情页面
	const goMovDetailPage = (item) => {
		uni.navigateTo({
			url: '/pages/mov_detail/mov_detail?movieId=' + item.id + '&num=0',
		})
	}

	// 前往我的收藏或者登陆
	const goFavoriteMovPage = () => {
		if (getUserId() > 0) {
			uni.navigateTo({
				url: '/pages/favorite/favorite'
			})
		} else {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}

	}

	// 返回
	const goBackPage = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss">
	@import url("mov_search.css");
</style>